<template>
	<view class="main">
		<uni-nav-bar title="消息列表" backgroundColor="#63a4f0" color="#000" statusBar="true"></uni-nav-bar>
		<view class="main-title">
			<!-- <uni-segmented-control :current="current" :values="cardMessage" style-type="text" :active-color="'#63a4f0'"
				@clickItem="onClickItem" /> -->
			<view class="segmented">
				<view v-for="item,index in cardMessage" class="segmented-item" :class="{'is-active': index === current}"
					@click="onClickItem({currentIndex:index})">
					{{ item }}
					<view class="badge" v-if="index === 1 && postListLength > 0">
						{{postListLength}}
					</view>

					<view class="badge" v-if="index === 0 && matterList && matterList.length > 0">
						{{matterList.length}}
					</view>
				</view>
			</view>
			<u-checkbox-group v-if="current === 1">
				<u-checkbox iconSize='32rpx' size='32rpx' labelSize='32rpx' v-model="checked"
					@change="getWaitPostList(checked = !checked)" label="只显示未读信息"></u-checkbox>
			</u-checkbox-group>
		</view>
		<scroll-view class="scrollView" scroll-y="true" @scrolltolower="handleScrolltolowerone()"
			:style="{height: setcollapseheight() + 'px'}" v-if="postList.length && current === 1">
			<view class="content" v-for="(item,index) in postList" :key="index" @click="goItem(item)">
				<view class="item">
					<!-- <view class="dot" v-if="item.receiveInfo&&!item.receiveInfo.readFlag"></view> -->
					<image v-if="item.receiveInfo&&item.receiveInfo.readFlag" src="@/static/index-message/read.png"
						class="img" mode="widthFix"></image>
					<image v-if="item.receiveInfo&&!item.receiveInfo.readFlag" src="@/static/index-message/unread.png"
						class="img" mode="widthFix"></image>
					<view class="dot-readFlag"> {{ item.receiveInfo&&item.receiveInfo.readFlag ? '消息已读' : '消息未读' }}
					</view>
					<view class="sendTime">
						{{item.sendTime}}
					</view>
					<view class="container">
						<view class="title">
							{{item.title}}
						</view>
						<view class="brief">
							{{item.content}}
						</view>
						<view class="times">
							更新时间：{{item.msgTime}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<scroll-view class="scrollView" scroll-y="true" @scrolltolower="handleScrolltolowerone()"
			:style="{height: setcollapseheight() + 'px'}" v-else-if="matterList.length && current === 0">
			<view class="content" v-for="(item,index) in matterList" :key="index">
				<view class="item">
					<!-- <view class="dot" v-if="item.receiveInfo&&!item.receiveInfo.readFlag"></view> -->
					<!-- <image v-if="item.receiveInfo&&item.receiveInfo.readFlag" src="@/static/index-message/read.png"
						class="img" mode="widthFix"></image>
					<image v-if="item.receiveInfo&&!item.receiveInfo.readFlag" src="@/static/index-message/unread.png"
						class="img" mode="widthFix"></image>
					<view class="dot-readFlag"> {{ item.receiveInfo&&item.receiveInfo.readFlag ? '消息已读' : '消息未读' }}
					</view> -->
					<view class="sendTime">
						{{item.applicationTime}}
					</view>
					<view class="container">
						<view class="title">
							{{item.title}}
						</view>
						<view class="brief">
							{{item.content}}
						</view>
						<view class="brief">
							申请人：{{item.applicant}}
						</view>
						<view class="times">
							更新时间：{{item.createTime}}
						</view>
						<button class="btn-handle" @click="routeParamsTo(item)">处理</button>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="noData" v-else>
			<view class="img">
				<image src="@/static/index-message/xiaoxi-2.png" mode=""></image>
				<view class="tex">
					当前未收到任何消息
				</view>
			</view>
		</view>

		<bottomBar ref="bottomBar"></bottomBar>
	</view>
</template>

<script>
	import bottomBar from "@/components/socialized-bottomtabar/home-bottomtabar"
	import API from '@/api/socialized-servce/index-message/index.js'
	export default {
		components: {
			bottomBar,
		},
		data() {
			return {
				page: 1,
				size: 10,
				total: 0,
				totalPages: 0,
				loading: false,
				postList: [],
				matterList: [],
				formData: {},
				checked: false,
				current: 0,
				postListLength: 0,
				cardMessage: ['待办', '通知'],
			}
		},
		mounted() {
			this.getWaitPostList()
			this.listByPartyTypeAndPartyNo()
			this.setcollapseheight()
		},
		methods: {
			//------------选项卡设置-------------
			onClickItem(e) {
				console.log(e)
				this.cardList = []
				// if (this.current !== e.currentIndex) {
				this.current = e.currentIndex
				// console.log(this.current)
				this.componten1mes = {
					nowpage: 1,
					total: 0,
					isshowloading: false,
				}
				// }
				this.getWaitPostList(false)
				this.listByPartyTypeAndPartyNo({})
			},
			async getWaitPostList(e) {
				// if (this.loading) return
				this.loading = true
				const readFlagList = e ? [0] : [0, 1]

				let params = {
					readFlagList: readFlagList,
					receiveUserNo: this.formData.userNo || uni.getStorageSync('userNo') || '211111',
					partyType:  '3', // 用户子系统类型  1总部监管方 2业务运营方 3服务提供方 4终端用户方
					partyNo: uni.getStorageSync('partyNo') || '1'
				}
				let res = await API.getWaitPostList(params)
				if (res.code === 200) {
					let newList = res.data
					this.postList = newList || []

					let postListLength = 0
					this.postList.forEach(item => {
						item.receiveInfo && !item.receiveInfo.readFlag && postListLength++
					})
					// this.goItem()
					this.$refs['bottomBar'].getUnreadNum()
					this.postListLength = postListLength
					this.loading = false
				}
			},
			// 事项
			async listByPartyTypeAndPartyNo(e) {
				// if (this.loading) return
				this.loading = true
				let params = {
					// readFlagList: readFlagList,
					// receiveUserNo: this.formData.userNo || uni.getStorageSync('userNo') || '211111',
					// 用户子系统类型  1总部监管方 2业务运营方 3服务提供方 4终端用户方
					// partyType: uni.getStorageSync('partyType') || '3',
					// partyNo: uni.getStorageSync('partyNo') || '1',
					receivePartyType: '3',
					receivePartyNo: uni.getStorageSync('partyNo') || uni.getStorageSync('organizationNo') || '',
					// messageTypeList: [23, 4]
					messageTypeList: [7, 15],

				}
				let res = await API.listByPartyTypeAndPartyNo(params)
				console.log(res)
				if (res.code === 200) {
					let newList = res.data
					this.matterList = newList || []
					// this.postListLength = postListLength
					this.loading = false
				}
			},
			// 工作台处理跳转
			routeParamsTo(item) {
				if (item.routeParams && item.routeParams.includes("{")) {
					this.$togo(item.appRouteUrl || item.webRouteUrl, {
						routeParams: item.routeParams,
						data: JSON.stringify(item)
					})
				} else {
					this.$togo(item.appRouteUrl || item.webRouteUrl, {
						no: item.routeParams,
						data: JSON.stringify(item)
					})
				}
				API.handleMatter({id:item.id})
				this.listByPartyTypeAndPartyNo({})
				this.$refs['bottomBar'].getUnreadNum()
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(230)
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				let oldHeight = uni.upx2px(156)

				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef H5
				winHeight = winHeight - 20

				// #endif
				return winHeight
			},
			handleScrolltolowerone() {
				if (this.loading) return;
				console.log('触底', this.page, this.totalPages);
				if (this.page <= this.totalPages && this.page * 10 < this.total) {
					this.page++
					this.getWaitPostList()
				}
			},
			async goItem(row) {
				// console.log(row)
				let res = await API.readMessage({
					id: row.receiveInfo && row.receiveInfo.id,
					messageRecordId: row.messageRecordId || row.receiveInfo && row.receiveInfo.messageRecordId,
					receiveUserNo: uni.getStorageSync('userNo') || row.sendUser && row.sendUser.userNo || '-1'
				})
				if (res.code === 200) {
					this.getWaitPostList(false)
					// this.$refs['bottomBar'].getUnreadNum()
					// this.postList.forEach(el => {
					// 	if (el.receiveInfo && el.receiveInfo.id === row.receiveInfo && row
					// 		.receiveInfo.id) {
					// 		if (el.receiveInfo && !el.receiveInfo.readFlag) {
					// 			this.$set(el.receiveInfo, 'readFlag', true)
					// 		}
					// 	}
					// })
				}
				// if (row.messageType == 'policy') { // 政策法规
				// 	this.$togo('/subPage1/socialized-service/policies-regulation/policy-regulation/detail/index', {
				// 		id: row.routeParams.policyId
				// 	})
				// } else if (row.messageType == 'market_info') { // 行情咨询
				// 	this.$togo(
				// 		'/subPage1/socialized-service/market-information/industry-information/article-detail/article-detail', {
				// 			id: row.routeParams.marketInformationId,
				// 			str: 'center'
				// 		})
				// } else if (row.messageType == 'product') { // 金融保险产品
				// 	this.$togo('/subPage1/socialized-service/financial-insurance/product/product-detail/index', {
				// 		productId: row.routeParams.productId
				// 	})
				// } else if (row.messageType == 'science_train') { // 培训
				// 	this.$togo('/subPage1/socialized-service/breed-aquatics/popular-science-training/index', {
				// 		key: row.brief
				// 	})
				// } else if (row.messageType == 'science') {
				// 	this.$togo('/subPage1/socialized-service/breed-aquatics/tech-article/article-detail/index', {
				// 		id: row.routeParams.articleId
				// 	})
				// } else if (row.messageType == 'science_vedio') {
				// 	if (row.routeParams.vedioGroupId) {
				// 		this.$togo('/subPage1/socialized-service/breed-aquatics/online-class/online-class', {
				// 			vedioTypeId: row.routeParams.vedioTypeId,
				// 			vedioGroupId: row.routeParams.vedioGroupId,
				// 			id: row.routeParams.vedioId
				// 		})
				// 	} else {
				// 		this.$togo('/subPage1/socialized-service/breed-aquatics/online-class/online-class', {
				// 			vedioTypeId: row.routeParams.vedioTypeId
				// 		})
				// 	}
				// } else if (row.messageType == 'exchange') {
				// 	this.$togo(
				// 		'/subPage1/socialized-service/specialist-consultation/expert-module/my-diagnosis/diagnosis-details/diagnosis-details', {
				// 			id: row.routeParams.invitationId
				// 		})
				// } else if (row.messageType == 'order') {
				// 	this.$togo('/subPage1/socialized-service/farm-service/normalUser/myOrder/myOrder', {
				// 		orderNo: row.routeParams.orderNo,
				// 		serviceProjectNo: row.routeParams.baseServiceProjectNo,
				// 		orderStatus: row.routeParams.orderStatus,
				// 		personType: row.routeParams.personType,
				// 	})
				// }
			}
		}

	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;

		.main-title {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}

	.scrollView {
		padding-top: 20rpx;

		.content {
			width: 100%;
			color: #000;
			position: relative;

			.item {
				position: relative;
				padding: 0 40rpx;
				font-size: 28rpx;
				margin-bottom: 20rpx;

				.dot {
					position: absolute;
					top: 60rpx;
					right: 52rpx;
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: red;
					z-index: 999;
				}

				.img {
					position: absolute;
					top: 24rpx;
					right: 170rpx;
					width: 34rpx;
					z-index: 1;
				}

				.dot-readFlag {
					position: absolute;
					top: 24rpx;
					right: 60rpx;
					// width: 34rpx;
					white-space: nowrap;
					z-index: 1;
				}

				.title {
					// padding-bottom: 10rpx;
					// border-bottom: 2rpx solid #c7c7c9;
					color: #272727;
				}

				.brief {
					background: #F5F6FA;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					padding: 12rpx 20rpx;

					.brief-item {
						width: 100%;
					}
				}

				.sendTime {
					width: 100%;
					text-align: center;
					margin-bottom: 10rpx;
					color: #c7c7c9;
				}

				.container {
					padding: 22rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					position: relative;

					.title {
						display: flex;
						font-weight: 700;
						overflow: hidden;
						font-size: 32rpx;
					}

					.brief {
						margin-top: 20rpx;
					}

					.times {
						margin-top: 26rpx;
						font-size: 28rpx;
						color: #606060;
					}
				}
			}

		}
	}

	.noData {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: 100%;

		.img {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 166rpx;
				height: 153rpx;
			}

			.tex {
				font-size: 32rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #525252;
			}
		}

	}

	.segmented {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		flex-direction: row;
		height: 36px;
		// overflow: hidden;
		cursor: pointer;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 10rpx;

		.segmented-item {
			color: #000;
			position: relative;
			border-color: transparent;
			border-bottom-style: solid;
			border-bottom-width: 2px;
			padding: 6px 0;
			line-height: 20px;

			&.is-active {
				color: #63a4f0;
				border-color: #63a4f0;
				border-bottom-style: solid;
				border-bottom-width: 2px;
				padding: 6px 0;
				// font-size: 14px;
				line-height: 20px;
				text-align: center;
				// &::after {
				// 	content: '';
				// 	position: absolute;
				// 	bottom: 0;
				// 	left: 0;
				// 	width: 100%;
				// 	height: 4rpx;
				// 	background-color: #63a4f0;
				// }
			}
		}
	}

	.btn-handle {
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 61rpx;
		width: 122rpx;
		height: 60rpx;
		opacity: 1;
		border-radius: 30rpx;
		background: linear-gradient(270deg, #88acff 0%, #2165ff 100%);
		position: absolute;
		right: 20rpx;
		bottom: 10rpx;
	}

	.badge {
		color: #fff;
		position: absolute;
		background-color: red;
		min-width: 30rpx;
		border-radius: 50%;
		padding: 2rpx 8rpx;
		top: -18rpx;
		left: 100%;
		z-index: 999;
		text-align: center;
	}
</style>